<template>
    <view class="page-activity-detail">
        <view class="banner">
            <u-image width="100%" height="358rpx" :src="proxy.$icon.detailsbanner"></u-image>
        </view>
        <view class="fly-card mb-2">
            <view class="content mx-4">
                <view class="title font-bold">{{ info.activitiesName }}</view>
                <view class="flex-between mt-2 mb-3">
                    <view class="tags">
                        <u-tag class="tag-cyan tag-noborder mr-1" text="书籍讨论" />
                        <u-tag class="tag-red tag-noborder" text="签到" v-if="info.isCheckinRequired == '1'" />
                    </view>
                    <view class="grey9"><u-icon name="map"></u-icon>0.5km</view>
                </view>
                <view class="desc">
                    <view>时间：<text class="c-grey3">{{ info.startTime }} {{ proxy.$util.getWeekName(dayjs(info.startTime).day()) }}</text></view>
                    <view class="flex-between" @click="openMap">
                        <view class="mr-4">地址：<text class="c-grey3">{{ info.address }}</text></view>
                        <u-image :src="proxy.$icon.navigation" width="40rpx" height="40rpx"></u-image>
                    </view>
                </view>
            </view>
        </view>
        <view class="sign">
            <view class="flex-between">
                <view class="flex-block title">
                    <u-image :src="proxy.$icon.enroll" width="48rpx" height="48rpx"></u-image>
                    <text class="ml-2">报名</text>
                </view>
                <view class="flex-block num">
                    <u-image :src="proxy.$icon.member" width="32rpx" height="32rpx"></u-image>
                    <text class="ml-2">8/{{ info.maxParticipants }}</text>
                </view>
            </view>
            <scroll-view class="scroll" scroll-x="true">
				<view v-for="(item,index) in signList" :key="index" class="item">
                    <u-image width="88rpx" height="88rpx" :src="item.image" shape="circle"></u-image>
                    <view class="mt-2">{{ item.name }}</view>
                </view>
			</scroll-view>
        </view>
        <view class="tab">
            <u-tabs :list="tab.list" :is-scroll="false" v-model="tab.current" @change="changeTab"></u-tabs>
        </view>
        <view class="fly-bottom-bar">
            <view class="flex-between content">
                <view class="fl flex-between">
                    <view class="icon-share">
                        <button open-type="share" class="btn-share"></button>
                        <u-image :src="proxy.$icon.share2" width="48rpx" height="48rpx"></u-image>
                        <view>分享</view>
                    </view>
                    <view class="icon-sign" @click="checkIn" v-if="info.isCheckinRequired == '1' && isDo.isRegister">
                        <u-image :src="isDo.isChecking ? proxy.$icon.signin2 : proxy.$icon.signin" width="48rpx" height="48rpx"></u-image>
                        <view>{{isDo.isChecking ? '已签到' : '签到'}}</view>
                    </view>
                </view>
                <view class="fr flex-between">
                    <view class="btn cyan" @click="tobeHost">成为主持人</view>
                    <view class="btn deepCyan" @click="activityRegistrations">{{ isDo.isRegister ? '已报名' : '报名活动' }}</view>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import dayjs from 'dayjs';
import {onShow, onLoad, onShareAppMessage} from '@dcloudio/uni-app';
import { useAppStore } from '@/stores/app';
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const appStore = useAppStore();
let pageParams = reactive({});
let info = ref();
let signList = reactive([
    {name: '张三', image: 'https://cdn.uviewui.com/uview/album/1.jpg'},
    {name: '张三', image: 'https://cdn.uviewui.com/uview/album/1.jpg'},
    {name: '张三', image: 'https://cdn.uviewui.com/uview/album/1.jpg'},
    {name: '张三', image: 'https://cdn.uviewui.com/uview/album/1.jpg'},
    {name: '张三', image: 'https://cdn.uviewui.com/uview/album/1.jpg'},
    {name: '张三', image: 'https://cdn.uviewui.com/uview/album/1.jpg'},
    {name: '张三', image: 'https://cdn.uviewui.com/uview/album/1.jpg'},
]);
let tab = reactive({
    list:[
        {name: '活动详情'},
        {name: '活动流程'},
        {name: '群二维码'},
        {name: '相关笔记'}
    ],
    current: 0,
});
let isDo = reactive({
    isChecking: false, //是否已签到
    isRegister: false, //是否已报名
    isHost: false, //是否是主持人，
    role: null, // 角色（INITIATOR: 发起人, HOST: 主持人, MEMBER: 普通会员，SPEAKERS：最佳发言人），多个:隔开
})
const getDetail = () => {
    proxy.$http('get', '/admin/activities/'+ pageParams.id, {}, (data,msg) => {
        info.value = data;
        console.log(info);
    })
}
const changeTab = (i) => {
    console.log(i)
};
const openMap = () => {
    uni.getLocation({
        type: 'gcj02', //返回可以用于wx.openLocation的经纬度
        success (res) {
            const latitude = res.latitude
            const longitude = res.longitude
            uni.openLocation({
                latitude,
                longitude,
                scale: 18
            });   
        },
        fail: error => {
            console.log(error)
        }
    })
};
const getMyActivity = () => {
    proxy.$http('get', '/admin/activityRegistrations/getUserActivities/'+ pageParams.id, {}, (data,msg) => {
        if(data){
            isDo.isRegister = true;
            isDo.isChecking = data.isChecking == '1' ? true : false;
            isDo.role = data.role;
        };
        console.log(isDo);
    })
}
const checkIn = () => {
    uni.getLocation({
        type: 'gcj02', //返回可以用于wx.openLocation的经纬度
        success (res) {
            let params = {
                userId: appStore.userInfo.userId,
                activityId: pageParams.id,
                location: '',
                latitude: res.latitude,
                longitude: res.longitude
            }
            uni.showLoading({mask: true});
            proxy.$http('post', '/admin/checkins', params, (data,msg)=> {
                uni.$u.toast('签到成功');
                getMyActivity();
                uni.hideLoading();
            },msg => {
                uni.hideLoading();
            })  
        },
        fail: error => {
            console.log(error)
        }
    })    
};
const tobeHost = () => {
    proxy.$http('post', '', {}, (data,msg) => {

    })
}
const activityRegistrations = () => {
    if(isDo.isRegister){
        return;
    }
    let params = {
        activityId: pageParams.id,
        userId: appStore.userInfo.userId
    }
    uni.showLoading({mask: true});
    proxy.$http('post', '/admin/activityRegistrations', params , (data,msg) => {
        uni.$u.toast('报名成功');
        getMyActivity();
        uni.hideLoading();
    },msg => {
        uni.hideLoading();
    });
};
onLoad((e) => {
    pageParams = e;
});
onShow(() => {
    getDetail();
    getMyActivity();
})
onShareAppMessage((option) =>{
	// let invite_info = this.$store.state.invite_info
	return {
		title: info.value.activitiesName,
		path: 'packageB/activity/detail?id='+ pageParams.id,
		// imageUrl: invite_info.image_path
	};
});

</script>